<html>

<head>
    <style>

        /* normalization */

        body, div, dl, dt, dd, ul, ol, li, 
        h1, h2, h3, h4, h5, h6, pre, 
        form, fieldset, input, textarea, p, blockquote, 
        th, td {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        body {
            padding: 10px;
        }

        /* vertical carousel */

        #arena {
            width: 110px;
            height: 80px;
        }
        #arena .button {
            width: 110px;
            height: 10px;
            background: gray;
        }
        #arena .button.active {
            background: black;
        }
        #arena .button.active:hover {
            cursor: pointer;   
        }
        #arena .window {
            width: 110px;
            height: 60px;
            position: relative;
            background: transparent;
            overflow: hidden;
        }
        #arena .roll {
            width: 110px;
            position: absolute;
            top: 0px;
        }
        #arena .item {
            width: 110px;
            height: 60px;
        }
        
        #arena .i0 {
            background: green;
        }
        #arena .i1 {
            background: gold;
        }
        #arena .i2 {
            background: blue;
        }
        #arena .i3 {
            background: gray;
        }
        #arena .i4 {
            background: #95ff00;
        }

        /* horizontal carousel */

        #arena2 {
            width: 140px;
            height: 80px;
        }
        #arena2 .button {
            width: 20px;
            height: 80px;
            background: gray;
        }
        #arena2 .button.active {
            background: black;
        }
        #arena2 .button.active:hover {
            cursor: pointer;   
        }
        #arena2 .window {
            width: 100px;
            height: 80px;
            position: relative;
            background: transparent;
            overflow: hidden;
        }
        #arena2 .roll {
            height: 80px;
            position: absolute;
            left: 0px;
        }
        #arena2 .item {
            width: 100px;
            height: 80px;
        }
        
        #arena2 .i0 {
            background: green;
        }
        #arena2 .i1 {
            background: gold;
        }
        #arena2 .i2 {
            background: blue;
        }
        #arena2 .i3 {
            background: gray;
        }
        #arena2 .i4 {
            background: #95ff00;
        }        

        
    </style>

    <script>
        var dojoConfig = {
            paths: {
                "olesk": "https://xlkost-javascript.googlecode.com/git/olesk"
            }
        };
    </script>

    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
		    data-dojo-config="async:1">
    </script>

    <script type="text/javascript">
        require(["olesk/widgets/carousel", "dojo/dom", "dojo/domReady!"], function(carousel, dom) {
            carousel(dom.byId("arena"), {duration: 300});
            carousel(dom.byId("arena2"), {duration: 300, direction: "horizontal"});
        });
    </script>
</head>

<body>
  <div id="vertical_carousel">
    <div id="arena">
        <div class="button brwd"></div>    
        <div class="window">
            <div class="roll">  
                <div class="item i0">Lorem ipsum dolor</div>
                <div class="item i1">Duis sit amet</div>
                <div class="item i2">Fusce at mollis enim</div>
                <div class="item i3">Sed non porttitor est</div>
                <div class="item i4">Mauris augue est</div>
            </div>    
        </div>
        <div class="button frwd"></div>   
    </div>
  </div>

  <div id="horizontal_carousel" style="margin-top: 30px;">
    <div id="arena2">
        <table cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td><div class="button brwd"></div> </td>
                <td>
                    <div class="window">
                        <div class="roll">  
                            <table cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <td><div class="item i0">Lorem ipsum dolor</div></td>
                                <td><div class="item i1">Lorem ipsum dolor</div></td>
                                <td><div class="item i2">Lorem ipsum dolor</div></td>
                                <td><div class="item i3">Lorem ipsum dolor</div></td>
                                <td><div class="item i4">Lorem ipsum dolor</div></td>
                            </tr>    
                            </tbody>
                            </table>
                        </div>  
                    </div>
                </td>
                <td><div class="button frwd"></div></td>
            </tr>
        </tbody>
        </table>
    </div>
  </div>  
</body>

</html>
